<template>
<div class="Left">
  <div class="product">
    <div class="font">
      <span>Product</span>
    </div>
  </div>

  <div class="search">

  </div>
</div>
</template>

<script>
export default {
  data(){
    return{

    }
  }
}
</script>

<style scoped>
.Left{
  cursor: pointer;
  width:100%;
  height: 100%;
  background-color: black;
}
.product{
  position: relative;
  background-color: rgba(194, 173, 152);
  width: 100%;
  height: calc(100vh - 38%);

}

.product .font{
  text-align: center;
  line-height: 520px;
}
.product .font span{
  font-size: 20px;
  color: #fff;

}
.product:after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: rgba(183, 158, 136);
  z-index:-2;
  border-radius: 4px;
  transition: all 0.4s;
}
.product:hover{
  z-index:1;
  transition: all 0.4s;
}

.product:hover:after {
  height: 100%;
  transition: all 0.4s;
}

.search{
  background-color: rgb(11, 15, 40);
  width: 100%;
  height: calc(100vh - 62%);
}
</style>